<template>
  <div class="dashboard-container" >
      <ul class="uli"  >
        <li  v-for="(item,index) in list" :key="index"   v-if="item.flag==true" style="background-color:red "
        @click="theListOf(list[index]) "  > 
          <div class="nav">{{item.name}}</div>
          <div>已开桌</div>
          </li>
          <li v-else> 
          <div class="nav">{{item.name}}</div>
          <div >空闲</div>
          </li>
      </ul>
   
          <template v-if="this.ddd==true"   >
          <div class="box" >
              <div class="top">
                  <div @click="disappear">x</div>
                  <div class="name">{{form.name}}</div>
              </div>

              <div class="clist">
                <ul>
                  <li class="listna" v-for="(i,v) in dishes" :key="v">
                    <div>{{i.name}}</div>
                    <div><span>{{i.price}}*{{i.num}}</span><button @click="removeFood(v)">x</button></div>
                  </li>
                </ul>
              </div>
              <div class="bottom">
                <div>总价:{{sum}}</div>
                <a @click="pays" class="by">买单</a>
              </div>
          </div>
        </template>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {getList} from  '@/api/table'
import {theOrder,details,removefood,pay} from '@/api/homePage'
import { get } from 'js-cookie'
export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ]),
    sum(){
      //计算总价
      let sum=0
      for (let i= 0; i < this.dishes.length; i++) {
        //循环得出每一个价钱和数量
        sum+=this.dishes[i].price*this.dishes[i].num
        
      }
      return sum
    }
  },
  data(){
    return{
         //桌子列表
          list:[],
          //隐藏显示
          ddd : false,
          //桌子的详情
          form:{},
          //菜品
          dishes:[],
          //订单详情
          paye:[]
    }
  },
  mounted(){
  getList().then(res=>{
    // console.log(res);
    //拿到桌子列表的数据
    //把拿到的值赋值给空数组
    this.list = res.data
    // console.log(this.list);
  })
  },
  methods:{
    theListOf(obj){
      //点击是时候把菜品列表打开
    this.ddd = true
    //拿到点击对应桌子的数据赋值给空对象
    this.form = obj
    //发起请求拿到对应的订单的详情
     details({oid:obj.order}).then(res=>{
      console.log(res);
      // 把对应点的菜赋值给空数组
      this.dishes =res.data.list
      //把拿到的全部数据赋值给空数组
      this.paye = res.data
      // console.log(this.dishes);
     })
    },
    disappear(){
      // 点击关闭的让订单详情隐藏
      this.ddd =false
    },
    removeFood(u){
      //u是下标
      //点击删除菜品弹出提示框
        this.$confirm('此操作为删除该菜品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
       }).then(()=>{
        //点击确定的时候触发此方法
         removefood({oid:this.form.order,index:u}).then(res=>{
          //删除成功后提示
              this.$message({    type: 'success', message: '删除成功!'});
          //重新获取菜品数据
         details({oid:this.form.order}).then(res=>{  this.dishes =res.data.list })
         })                      //点击取消的时提示已经取消
       }).catch(() => {  this.$message({  type: 'info',    message: '已取消删除'   }); })
         
    },
    pays(){
      // console.log(666);
      // console.log(this.paye.table);
      //买单
      pay({tid:this.paye.table}).then(res=>{
       //让订单消失
       this.ddd=false,
       //重新获取桌子列表
       getList().then(res=>{ this.list = res.data  })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.uli>li{
  height: 122px;
  width: 208px;
  border: 1px solid red;
  border-radius: 20px;
  list-style: none;
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
  background-color: #bababa ;
  display: inline-flex;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  flex-direction: column;
  flex-direction: column;
  cursor: pointer;
}
.nav{
  font-size: 20px;
}
.box{
    position: fixed;
    right: 0;
    top: 0;
    width: 350px;
    height: 100%;
    border: 1px solid #00f;
    background-color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.top{
  height: 100px;
    border-bottom: 1px solid #00f;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 15px;
}
.name{
    text-align: center;
    line-height: 56px;
    height: 56px;
    font-size: 20px;
}
.clist{
   -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow-y: auto;
}
.clist ul{
      -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
}
.listna{
      display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 40px;
   border-bottom: 1px solid #00f;
}
button{
  font-family: sans-serif;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}
.bottom{
    height: 100px;
    border: 1px solid red;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 15px;
}
.by{
  display: inline-block;
    width: 100%;
    height: 45px;
    background-color: red;
    line-height: 45px;
    text-align: center;
    border-radius: 5px;
}
</style>
